<template>
  <div>
    <div>
      <RHTable :RHTable="table" ref="r_h_table"></RHTable>
    </div>
    <!--弹出框-->
    <div>
      <el-dialog
        :close-on-click-modal="false"
        :title="dialog.title"
        :visible.sync="dialog.dialogFormVisible"
        @close="resetForm"
      >
        <RHForm :RHForm="form" ref="r_h_form"></RHForm>
        <div class="dialog-footer" slot="footer">
          <el-button @click="dialog.dialogFormVisible = false">取 消</el-button>
          <el-button @click="submitForm()" type="primary">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import RHTable from "@/common/RHTable/index.vue";
import RHForm from "@/common/form/index";
import * as service from "@/api/user";

export default {
  name: "user_index",
  data: function() {
    return {
      param: {},
      table: {
        url: this.$store.state.url.user + "api/users/user/getUserList",
        header: {
          show: true,
          btn: [{ value: "新增", click: this.show }]
        },
        columns: [
          { fieId: "userId", title: "ID" },
          { fieId: "userName", title: "用户名" },
          { fieId: "name", title: "姓名" },
          { fieId: "createTime", title: "创建时间" },
          { fieId: "updateTime", title: "修改时间" }
        ],
        columnsBtn: [
          { value: "修改", click: this.updatePre, size: "mini" },
          { value: "删除", click: this.delete, size: "mini" }
        ],
        // 分页
        paging: true
      },
      dialog: {
        dialogFormVisible: false,
        title: "添加模块"
      },
      form: [
        { el: "hide", model: "userId" },
        {
          el: "input",
          label: "用户名",
          prop: [
            {
              validator: async (rule, value, callback) => {
                const userId = this.$refs.r_h_form.getForm("userId");
                let res = await service.checkUserName({
                  userName: value,
                  userId: userId
                });
                if (res.entity > 0) {
                  callback(new Error("用户名不能重复！"));
                } else {
                  callback();
                }
              },
              trigger: "blur"
            },
            { required: true, message: "请输入用户名", trigger: "blur" }
          ],
          model: "userName"
        },
        {
          el: "input",
          password: true,
          label: "密码",
          prop: { required: true, max: 20 },
          model: "password"
        },
        {
          el: "input",
          label: "姓名",
          prop: { required: true, max: 5 },
          model: "name"
        },
        {
          el: "select",
          label: "角色",
          prop: { required: true, type: "array" },
          model: "roleIds",
          multiple: true,
          candidate: {
            label: "roleName",
            value: "roleId",
            url:
              this.$store.state.url.user + "api/users/renHaiRole/getRoleAllList"
          }
        }
      ],
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur"
          }
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur"
          }
        ],
        roleIds: [
          {
            type: "array",
            required: true,
            message: "请选择角色",
            trigger: "change"
          }
        ]
      },
      select: {
        multiple: true,
        url: this.$store.state.url.user + "api/users/renHaiRole/getRoleAllList",
        label: "roleName",
        value: "roleId"
      }
    };
  },
  methods: {
    show() {
      this.dialog.dialogFormVisible = true;
      this.form[2].el = "input";
    },
    resetForm() {
      this.$refs.r_h_form.resetForm();
    },
    submitForm() {
      this.$refs.r_h_form.RHFormValidate((valid, form) => {
        if (valid) {
          service.saveUpdate(form).then(data => {
            this.dialog.dialogFormVisible = false;
            this.$util.message(data);
            //刷新表格
            this.$refs.r_h_table.refresh();
            //关闭弹窗
            this.dialog.dialogFormVisible = false;
          });
        }
      });
    },
    updatePre(param) {
      this.form[2].el = "hide";
      service.details({ userId: param.userId }).then(data => {
        //打开弹窗
        this.dialog.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs.r_h_form.formInitialize(data.entity);
        });
      });
    },
    delete(param) {
      const that = this;
      console.log(this.$refs.r_h_form);
      that.$util.messageBox({ msg: "确定删除？" }, function() {
        service.del({ userId: param.userId }).then(function(data) {
          that.$util.message(data);
          //刷新表格
          that.$refs.r_h_table.refresh();
        });
      });
    }
  },
  components: {
    RHTable,
    RHForm
  }
};
</script>

<style scoped></style>
